<template>
  <div class="menu-mini" >
    <div class="menu-mini-list" id="menu" :style="ismiddle">
        <div class="menu-item" v-for="(item,index) of mini" :key="index">
            <router-link :to="item.path" custom v-slot="{ navigate, isActive }">
                <div @click="navigate" class=" menu-item-info">
                    <span :class="isActive ? 'active menu-name' : ' menu-name'">
                         {{item.name}}
                    </span>

                </div>
            </router-link>
        </div>

    </div>
  </div>
</template>

<script>
export default {
  props: {
    mini: {
      type: Array,
      default: null
    }
    // ismiddle:{type: Boolean,default:''}
  },
  data () {
    return {
      flag: null, // 鼠标按下为true
      downX: null, // 鼠标点击的x下标
      // scrollLeft: null, // 当前元素滚动条的偏移量
      ismiddle: { justifyContent: 'center' }
      // ismiddle: true
    }
  },
  methods: {
    // 初始化与绑定监听事件方法
    scrollInit () {
      // 获取要绑定事件的元素
      const menu = document.getElementById('menu')
      let flag // 鼠标按下
      let downX // 鼠标点击的x下标
      let scrollLeft // 当前元素滚动条的偏移量
      menu.addEventListener('mousedown', function (event) {
        flag = true
        downX = event.clientX // 获取到点击的x下标
        scrollLeft = this.scrollLeft // 获取当前元素滚动条的偏移量
      })
      menu.addEventListener('mousemove', function (event) {
        if (flag) { // 判断是否是鼠标按下滚动元素区域
          const moveX = event.clientX // 获取移动的x轴
          const scrollX = moveX - downX // 当前移动的x轴下标减去刚点击下去的x轴下标得到鼠标滑动距离
          this.scrollLeft = scrollLeft - scrollX // 鼠标按下的滚动条偏移量减去当前鼠标的滑动距离
          console.log(scrollX)
        }
      })
      // 鼠标抬起停止拖动
      menu.addEventListener('mouseup', function () {
        flag = false
      })
      // 鼠标离开元素停止拖动
      menu.addEventListener('mouseleave', function (event) {
        flag = false
      })
    }
  },
  mounted () {
    console.log(this.ismiddle)
  }

}
</script>

<style lang="scss" scoped>
.menu-mini{
    width: 11.22rem;
    height: .935rem;
    background: #fff;
    position: sticky;
    overflow-x: scroll;
    overflow-y: hidden;
    -ms-overflow-style: none; /* IE 10+ */
    scrollbar-width: none; /* Firefox */
    top: 0;
    left: 0;
    z-index: 1999;
    border-bottom: 1px solid #eee;
    .menu-mini-list{
        // width: 200%;
        height: 1.15rem;
        overflow-x: scroll;
        overflow-y: hidden;
        scrollbar-width:none;
        -ms-overflow-style: none; /* IE 10+ */
        scrollbar-width: none; /* Firefox */
        display: flex;
        .middle{
          justify-content: center;
        }
        .active{
            color: #f60;
            font-weight: 600;
            border-bottom: .04rem solid #f60;
        }
        .menu-item{
            line-height: .845rem;
            white-space: nowrap;
            text-align: center;
            width: 1.7rem;
            .menu-name{
                font-size: .35rem;
                display: inline-block;
            }

        }
    }

}
</style>
